<template>
	<view class="shopping" :style="isScroll ? 'height: 100vh;overflow: hidden;' : ''">
		<view class="" style="width: 100%; position: fixed; top: 0; z-index: 999; background: #fff">
			<view class="topFixed" style="background: url(https://sz.vvv5g.com/assets/img/wxImg/shopping_top.png); background-size: 100% auto">
				<view class="" :style="'height:' + navBarInfo.statusBarHeight + 'px;'"></view>
				<view class="flex align-center justify-between" :style="'height:' + navBarInfo.navBarHeight + 'px;'">
					<view @click="onLocation" class="flex flex-1 align-center" style="">
						<view style="font-size: 0; padding-left: 24rpx">
							<image style="width: 42rpx; height: 42rpx" src="https://sz.vvv5g.com/assets/img/wxImg/dingwei.png" mode=""></image>
						</view>
						<view class="text-overflow1" style="font-size: 30rpx; color: #333333">
							{{ positionText ? positionText : address ? address : '请选择' }}
						</view>
						<view style="font-size: 0">
							<image style="width: 22rpx; height: 22rpx" src="https://sz.vvv5g.com/assets/img/wxImg/downArrow.png" mode=""></image>
						</view>
					</view>
					<view class="text-overflow1 flex align-center justify-center" style="font-size: 32rpx; color: #fff">
						<view class="flex align-center" style="background: #fff; border-radius: 32rpx">
							<view
								@click="changeRange(0)"
								style="padding: 12rpx 30rpx; border: 2rpx solid #fff; border-radius: 32rpx; font-size: 28rpx; color: #999"
								:style="rangeIndex == 0 ? 'color:#ffffff;background:#EBBF88;' : ''"
							>
								同城
							</view>
							<view
								@click="changeRange(1)"
								style="padding: 12rpx 30rpx; border: 2rpx solid #fff; border-radius: 32rpx; font-size: 28rpx; color: #999"
								:style="rangeIndex == 1 ? 'color:#ffffff;background:#EBBF88;' : ''"
							>
								全国
							</view>
						</view>
					</view>
					<view class="flex-1"></view>
				</view>
				<!-- 搜索 -->
				<view class="" style="height: 10rpx"></view>
				<view
					class="flex align-center"
					@click="goSearch"
					style="
						width: 702rpx;
						height: 64rpx;
						margin: 0 24rpx;
						background: url(https://sz.vvv5g.com/assets/img/wxImg/seachba.png);
						background-size: 702rpx 64rpx;
						background-repeat: no-repeat;
					"
				>
					<view class="" style="font-size: 0; padding-left: 32rpx">
						<image style="width: 32rpx; height: 32rpx" src="https://sz.vvv5g.com/assets/img/wxImg/search.png" mode=""></image>
					</view>
					<view class="" style="font-size: 0; margin: 0 20rpx">
						<image style="height: 20rpx" src="https://sz.vvv5g.com/assets/img/wxImg/searchBar.png" mode="heightFix"></image>
					</view>
					<input
						class="flex-1"
						type="text"
						@input="search"
						v-model="keyWord"
						placeholder="商品名/品牌/商品种类/关键字"
						style="font-size: 22rpx"
						placeholder-style="font-size:22rpx;color:#999"
					/>
				</view>
				<view class="" style="height: 10rpx"></view>
			</view>
		</view>
		<view class="" :style="'height:' + topFixedHeight + 'px;'"></view>
		<!-- 轮播图 -->
		<view class="">
			<view class="" style="height: 22rpx"></view>
			<swiper
				style="width: 702rpx; height: 246rpx; margin: 0 auto"
				:indicator-active-color="'#FFFFFF'"
				:indicator-color="'rgba(255, 255, 255, 0.6)'"
				circular
				:indicator-dots="true"
				:autoplay="autoplay"
			>
				<swiper-item @click="goPages('/pages/home/prefecture')" style="width: 702rpx; height: 246rpx" v-for="(item, index) in rotationList" :key="index">
					<image style="width: 702rpx; height: 246rpx; border-radius: 20rpx" :src="$wanlshop.oss(item.media, 414, 0, 1, 'transparent', 'png')" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 人气爆款 -->
		<template v-if="renqiList.length != 0">
			<view class="" style="padding-bottom: 32rpx">
				<view class="flex align-end justify-between" style="padding: 24rpx">
					<view class="flex align-end">
						<view class="" style="font-size: 30rpx; color: #333333">人气爆款</view>
					</view>
					<view @click="goMore(1)" class="flex align-center">
						<view class="" style="font-size: 22rpx; color: #666666">更多</view>
						<view class="" style="font-size: 0">
							<image style="width: 26rpx; height: 26rpx" src="https://sz.vvv5g.com/assets/img/wxImg/rightArrow.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="flex">
					<view class="" style="width: 24rpx"></view>
					<view class="flex-1 flex align-center .scrollnobar" style="overflow-x: scroll">
						<view v-for="(item, index) in renqiList" :key="index" @click="goGoodsDetail(item.id)" class="flex flex-column align-center" style="margin-right: 24rpx">
							<view class="" style="font-size: 0">
								<image style="width: 176rpx; height: 176rpx; background: #f2f2f2; border-radius: 8rpx" :src="item.image_src" mode=""></image>
							</view>
							<view class="text-overflow2" style="line-height: 34rpx; width: 176rpx; margin-top: 20rpx; margin-bottom: 12rpx; font-size: 24rpx; color: #333333">
								{{ item.title }}
							</view>
							<view class="flex align-end" style="color: #ef3540; font-weight: 700; font-size: 28rpx; width: 176rpx">
								<span style="font-size: 20rpx">￥</span>
								{{ item.price }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bar"></view>
		</template>
		<!-- 最新上架 -->
		<template v-if="zuixinList.length != 0">
			<view class="">
				<view class="flex align-end justify-between" style="padding: 24rpx; padding-top: 0">
					<view class="flex align-end">
						<view class="" style="font-size: 30rpx; color: #333333">最新上架</view>
					</view>
					<view @click="goMore(2)" class="flex align-center">
						<view class="" style="font-size: 22rpx; color: #666666">更多</view>
						<view class="" style="margin-left: 8rpx; font-size: 0">
							<image style="width: 28rpx; height: 28rpx" src="https://sz.vvv5g.com/assets/img/wxImg/rightArrow.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="flex scrollnobar" style="overflow-x: scroll">
					<view class="" style="margin-left: 24rpx; margin-right: 100rpx">
						<view v-for="(item, index) in zuixinList" :key="index" @click="goGoodsDetail(item.id)" v-if="index <= 2" class="flex align-center" style="margin-bottom: 24rpx">
							<view class="" style="font-size: 0; margin-right: 20rpx">
								<image style="width: 128rpx; height: 128rpx; background: #f2f2f2; background: #f2f2f2; border-radius: 8rpx" :src="item.image_src" mode="aspectFill"></image>
							</view>
							<view class="flex flex-column justify-between" style="height: 128rpx; padding-top: 6rpx; padding-bottom: 8rpx; box-sizing: border-box">
								<view class="text-overflow2" style="font-size: 24rpx; color: #333333; width: 398rpx; line-height: 34rpx">
									{{ item.title }}
								</view>
								<view class="flex align-end" style="color: #ef3540; font-weight: 700; font-size: 28rpx">
									<span style="font-size: 20rpx">￥</span>
									{{ item.price }}
								</view>
							</view>
						</view>
						<view class="" style="height: 8rpx"></view>
					</view>
					<view class="" style="margin-left: 24rpx; margin-right: 100rpx">
						<view v-for="(item, index) in zuixinList" :key="index" @click="goGoodsDetail(item.id)" v-if="index > 2" class="flex align-center" style="margin-bottom: 24rpx">
							<view class="" style="font-size: 0; margin-right: 20rpx">
								<image style="width: 128rpx; height: 128rpx; background: #f2f2f2; background: #f2f2f2; border-radius: 8rpx" :src="item.image_src" mode=""></image>
							</view>
							<view class="flex flex-column justify-between" style="height: 128rpx; padding-top: 6rpx; padding-bottom: 8rpx">
								<view class="text-overflow2" style="font-size: 24rpx; color: #333333; width: 398rpx">
									{{ item.title }}
								</view>
								<view class="flex align-end" style="color: #ef3540; font-weight: 700; font-size: 28rpx">
									<span style="font-size: 20rpx">￥</span>
									{{ item.price }}
								</view>
							</view>
						</view>
						<view class="" style="height: 8rpx"></view>
					</view>
				</view>
			</view>
			<view class="bar"></view>
		</template>
		<!-- 最受好评 -->
		<template v-if="haopinList.length != 0">
			<view class="" style="background: url(https://sz.vvv5g.com/assets/img/wxImg/zuishouhaopingbg.png); background-size: 750rpx 384rpx; padding-bottom: 32rpx">
				<view class="flex align-end justify-between" style="padding: 24rpx">
					<view class="flex align-end">
						<view class="" style="font-size: 30rpx; color: #333333">最受好评</view>
						<view class="flex align-end" style="font-size: 22rpx; color: #6d6d6d; margin-left: 8rpx">
							人气榜
							<view class="" style="font-size: 0; margin-left: 6rpx; margin-bottom: 2rpx">
								<image style="width: 24rpx; height: 24rpx" src="https://sz.vvv5g.com/assets/img/wxImg/zuishouhaopingicon.png" mode=""></image>
							</view>
						</view>
					</view>
					<view @click="goMore(3)" class="flex align-center">
						<view class="" style="font-size: 22rpx; color: #666666">更多</view>
						<view class="" style="margin-left: 8rpx; font-size: 0">
							<image style="width: 28rpx; height: 28rpx" src="https://sz.vvv5g.com/assets/img/wxImg/rightArrow.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="flex">
					<view class="" style="width: 24rpx"></view>
					<view class="flex-1 flex align-center .scrollnobar" style="overflow-x: scroll">
						<view v-for="(item, index) in haopinList" :key="index" @click="goGoodsDetail(item.id)" class="flex flex-column align-center" style="margin-right: 24rpx">
							<view class="" style="font-size: 0">
								<image style="width: 176rpx; height: 176rpx; background: #f2f2f2; border-radius: 8rpx" :src="item.image_src" mode=""></image>
							</view>
							<view class="text-overflow2" style="width: 176rpx; margin-top: 20rpx; margin-bottom: 12rpx; font-size: 24rpx; color: #333333; line-height: 34rpx; height: 68rpx">
								{{ item.title }}
							</view>
							<view class="flex align-end" style="color: #ef3540; font-weight: 700; font-size: 28rpx; width: 176rpx">
								<span style="font-size: 20rpx">￥</span>
								{{ item.price }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 占位置 -->
			<view class="" style="height: 32rpx"></view>
		</template>
		<!-- 秒杀商品 -->
		<!--  -->

		<template v-if="miaoshaList.length != 0">
			<view class="bar"></view>
			<view class="flex" style="padding-top: 28rpx">
				<view @click="goMore(4)" class="" style="font-size: 0; margin-right: 14rpx">
					<image style="width: 114rpx; height: 256rpx" src="https://sz.vvv5g.com/assets/img/wxImg/miaoshabg.png" mode=""></image>
				</view>
				<view class="flex-1 .scrollnobar" style="overflow-x: scroll">
					<view class="flex">
						<view v-for="(item, index) in miaoshaList" :key="index" class="flex flex-column align-center" style="margin-right: 24rpx">
							<view class="" style="font-size: 0">
								<image style="width: 128rpx; height: 128rpx; background: #f2f2f2; border-radius: 12rpx" :src="item.image_src" mode=""></image>
							</view>
							<view class="flex align-end" style="color: #ef3540; font-weight: 700; font-size: 28rpx; margin-top: 16rpx; margin-bottom: 14rpx">
								<span style="font-size: 20rpx">￥</span>
								{{ item.price }}
							</view>
							<view class="" style="color: #eaa859; font-size: 22rpx">限量{{ item.limit }}份！</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 30rpx"></view>
		</template>

		<view class="" v-if="isFixed" :style="'height:' + domHeight + 'px;'"></view>
		<view class="dom" :style="isFixed ? 'position: fixed;width:100%;top:' + topFixedHeight + 'px' : ''" style="background: #ffffff; padding-bottom: 30rpx; z-index: 999">
			<view class="flex align-center" style="margin: 32rpx 80rpx 40rpx 32rpx; position: relative">
				<scroll-view class="scrollnobar" style="white-space: nowrap; font-size: 0" scroll-with-animation scroll-x="true" :scroll-into-view="'t' + tid">
					<view style="display: inline-block; margin-right: 28rpx; position: relative" v-for="(item, index) in navList" :key="index" @click="clickNavList(item.id)">
						<view :id="'t' + item.id" style="height: 34rpx" class="flex flex-column justify-center align-center">
							<!-- font-weight:700; -->
							<view class="flex align-center" style="font-size: 28rpx; color: #666; z-index: 99" :style="tid == item.id ? 'color:#333;' : ''">
								{{ item.name }}
							</view>
						</view>
						<view class="" v-if="tid == item.id" style="font-size: 0; position: absolute; right: 0; bottom: 0">
							<image style="width: 81rpx; height: 15rpx" src="../../static/store/fenglei3.png" mode=""></image>
						</view>
					</view>
				</scroll-view>
				<view
					class="flex justify-center"
					@click="onXianS"
					style="
						font-size: 0;
						width: 100rpx;
						background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 20%);
						position: absolute;
						top: 0;
						bottom: 0;
						right: -80rpx;
						margin: auto;
						z-index: 100;
					"
				>
					<image style="width: 34rpx; height: 34rpx" src="../../static/store/fenglei2.png" mode=""></image>
				</view>
			</view>
			<!-- 排序类型 -->
			<view class="screen_list_box flex justify-evenly">
				<view class="list_box flex align-center" v-for="(item, index) in screen_list" :key="index" @click="onActive(index)">
					<view :class="[listIndex == index ? 'active_txt' : 'active_txt1']" style="font-size: 24rpx">
						{{ item.txt }}
					</view>
					<view class="" style="font-size: 0">
						<image style="width: 32rpx; height: 32rpx" :src="listIndex == index ? item.img1 : item.img" mode=""></image>
					</view>
					<!-- <image class="img" :src="listIndex == index?item.img1:item.img" mode=""></image> -->
				</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<zero-waterfall :list="goodsList" @clear="clearData" :status="status"></zero-waterfall>
		<!-- 帮卖分成助理弹窗 -->
		<uni-popup ref="popup">
			<view class="" style="background: #f9fafa; border-radius: 28rpx; padding: 32rpx; width: 618rpx; padding-bottom: 42rpx">
				<view class="flex justify-between" style="font-size: 0; width: 100%">
					<view class=""></view>
					<image @click="close" style="width: 25rpx; height: 25rpx" src="@/static/shopping/cha.png" mode=""></image>
				</view>
				<view class="flex justify-center" style="font-size: 0">
					<image style="width: 222rpx; height: 52rpx" src="@/static/banghaoyouzhuli.png" mode=""></image>
				</view>
				<view class="flex align-center justify-between" style="margin: 50rpx 87rpx 42rpx 87rpx">
					<view class="" style="font-size: 0" v-for="(item, index) in 4" :key="index">
						<image v-if="user_list[index]" style="width: 65rpx; height: 60rpx" src="../../static/answer/xm.png" mode=""></image>
						<image v-else style="width: 65rpx; height: 60rpx" src="../../static/answer/x.png" mode=""></image>
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin: 0 61rpx; background: #f3f5f6; border-radius: 16rpx; padding: 36rpx">
					<view class="" style="font-size: 0" v-for="(item, index) in 4" :key="index">
						<image v-if="user_list[index]" style="width: 60rpx; height: 60rpx; border-radius: 50%" :src="user_list[index].avatar" mode=""></image>
						<image v-else style="width: 60rpx; height: 60rpx; border-radius: 50%" src="../../static/yao.png" mode=""></image>
					</view>
					<!-- <view class="" style="font-size: 0;">
						<image style="width: 60rpx;height: 60rpx;border-radius: 50%;" src="../../static/jx.png" mode=""></image>
					</view> -->
					<view class="flex flex-clum align-center" style="">
						<view class="" style="font-size: 36rpx; font-weight: 700; color: #f27109">
							{{ user_list.length }}
						</view>
						<view class="" style="font-size: 20rpx; color: #333333">已点亮</view>
					</view>
				</view>
				<view
					@click="zhuli"
					v-if="dianliangType == 1"
					class="flex align-center justify-center"
					style="height: 80rpx; background: linear-gradient(154deg, #f08a38 0%, #f06b00 100%); border-radius: 40rpx; font-size: 28rpx; color: #ffffff; margin-top: 36rpx"
				>
					帮助点亮
				</view>
				<button open-type="share" v-if="dianliangType == 2" :plain="true" style="background-color: transparent; border: none; padding: 0; padding-bottom: 10rpx">
					<view class="guo_btn">邀请好友助力</view>
				</button>
			</view>
		</uni-popup>
		<!-- 筛选弹窗 -->
		<view class="fu_chuang" v-if="show" @click="show = false">
			<view class="c_fu_chuang mar-auto">
				<view class="c_fu_txt_box flex">
					<view class="list_txt" v-for="(item, index) in navList" :key="index" @click="fuActive(item.id)">
						<view class="fu_txt s28">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<privacy ref="privacy"></privacy>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import screenList from '../../components/screen.vue';
import privacy from '../../components/privacy.vue';
export default {
	components: {
		screenList,
		privacy
	},
	data() {
		return {
			dianliangType: 1, //1 帮别人点亮 2 分享点亮
			// positionText: '', //选择的位置
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			listIndex: 0,
			// 商品列表
			goodsList: [],
			// 分类列表
			navList: [],
			tid: 0,
			navIndex: 0,
			show: false,
			isFixed: false,
			domHeight: 0,
			topheight: 0,
			screen_list: [
				{
					img: '../../static/Group 942.png',
					img1: '../../static/Group 3815.png',
					txt: '爆款'
				},
				{
					img: '../../static/Group 122.png',
					img1: '../../static/Group 3814.png',
					txt: '价格'
				},
				{
					img: '../../static/Group 121.png',
					img1: '../../static/Group 3817.png',
					txt: '最新'
				},
				{
					img1: '../../static/Group 3816.png',
					img: '../../static/Group 941.png',
					txt: '好评'
				},
				{
					img1: 'https://sz.vvv5g.com/assets/img/wxImg/juli2.png',
					img: 'https://sz.vvv5g.com/assets/img/wxImg/juli1.png',
					txt: '距离'
				}
			],
			// 轮播列表
			rotationList: [],
			page: 1,
			totalNum: '',
			goodsTwoList: [],
			type: 0,
			title: '',
			flag: true,
			status: 0,
			// background: '#EBBE87',
			shareUserid: 0,
			user_list: [],
			// 顶部
			navBarInfo: {},
			topFixedHeight: 0,
			rangeIndex: 1, //0 同城 1 全国
			//搜索
			keyWord: '',
			renqiList: [], //人气列表
			zuixinList: [], //最新列表
			haopinList: [], //好评列表
			miaoshaList: [], //秒杀列表
			address: '',
			// selectedAddress: '',
			// lng: '', //选择的经纬度
			// lat: '', //选择的经纬度
			isScroll: true //是否禁止页面滚动
		};
	},
	computed: {
		address2() {
			return this.$store.state.getLocation.address2;
		},
		// 选择的位置
		positionText() {
			return this.$store.state.getLocation.positionText;
		},
		selectedAddress() {
			return this.$store.state.getLocation.selectedAddress;
		},
		//选择位置经纬度
		lat() {
			return this.$store.state.getLocation.lat;
		},
		lng() {
			return this.$store.state.getLocation.lng;
		},
		rangeObj() {
			return this.$store.state.getLocation.rangeObj;
		},
		selectionCitys() {
			return uni.getStorageSync('selectionCity');
		},

		...mapState(['icon'])
	},
	watch: {
		// 此处监听variable变量，当期有变化时执行
		rangeObj(newData, oldData) {
			// item1为新值，item2为旧值
			this.changeRange(newData.home);
		}
	},
	onLoad(options) {
		this.getRankList();
		if (options.user_id) {
			this.shareUserid = options.user_id;
			this.getInviteList();
		}
		this.getInit();
		this.getCategoryList();
		this.navBarInfo = this.$navBarInfo;
		this.address = '定位中';
		this.$getLocation().then((res) => {
			this.$request({
				url: 'common/getLocation',
				data: {
					lat: res.latitude,
					lng: res.longitude
				}
			}).then((jes) => {
				this.address = jes.data.data.address_component.city;
				const flag = uni.getStorageSync('flag');
				if(!flag){
					if(!this.$refs.privacy.showPrivacy){
						this.$refs.privacy.showPrivacy = true;
					}
				}
			});
		});
	},
	onPageScroll(e) {
		if (this.topheight > e.scrollTop) {
			this.isFixed = false;
		} else {
			this.isFixed = true;
		}
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			return {
				title: `${uni.getStorageSync('userInfo').nickname}邀请您助力成为荟云街城市合伙人！`,
				path: '/pages/shopping/shopping?user_id=' + uni.getStorageSync('userInfo').id,
				imageUrl: 'https://sz.vvv5g.com/assets/img/wxImg/share.jpg'
			};
		}
	},
	onReachBottom() {
		if (this.page >= this.totalNum) {
			this.$wanlshop.msg('我是有底线的!');
		} else {
			this.status = 0;
			this.page++;
			this.getGoodsData();
		}
	},
	methods: {
		//搜索
		goSearch() {
			uni.navigateTo({
				url: '/pages/filePages/screen/screen?shopId=0'
			});
		},
		//商品详情
		goGoodsDetail(ind) {
			uni.navigateTo({
				url: '/pages/filePages/goodsDetail/goodsDetail?id=' + ind + '&type=0'
			});
		},
		// 获取 人气 最新 好评 秒杀列表
		async getRankList() {
			uni.showLoading({
				title: '',
				mask: true
			});
			let list1 = await this.getRenqiList();
			list1 = list1.data.data.data ? list1.data.data.data : [];
			this.renqiList = list1.filter((item, index) => index <= 5);
			let list2 = await this.getZuixinList();
			list2 = list2.data.data.data ? list2.data.data.data : [];
			this.zuixinList = list2.filter((item, index) => index <= 5);
			let list3 = await this.getHaopinList();
			list3 = list3.data.data.data ? list3.data.data.data : [];
			this.haopinList = list3.filter((item, index) => index <= 5);
			let list4 = await this.getMiaoshaList();
			list4 = list4.data.data.list.data;
			this.miaoshaList = list4.filter((item, index) => index <= 5);
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.topFixed')
					.boundingClientRect((data) => {
						this.topFixedHeight = data.height;
					})
					.exec();
				const query1 = uni.createSelectorQuery().in(this);
				query1
					.select('.dom')
					.boundingClientRect((data) => {
						this.domHeight = data.height;
						this.topheight = data.top;
					})
					.exec();
				this.isScroll = false;
			}, 800);
			uni.hideLoading();
		},
		getRenqiList() {
			let that = this;
			let latitude = uni.getStorageSync('location').latitude;
			let longitude = uni.getStorageSync('location').longitude;
			return that.$request({
				url: 'product/lists',
				method: 'POST',
				data: {
					page: 1,
					sort: 'views',
					order: 'desc',
					new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this.address2 ? this.address2 : '',
					lng: this.lng ? this.lng : longitude ? longitude : 0,
					lat: this.lat ? this.lat : latitude ? latitude : 0,
					index: 'index'
				}
			});
		},
		getZuixinList() {
			let that = this;
			let latitude = uni.getStorageSync('location').latitude;
			let longitude = uni.getStorageSync('location').longitude;
			return that.$request({
				url: 'product/lists',
				method: 'POST',
				data: {
					page: 1,
					sort: 'updatetime',
					order: 'desc',
					new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this.address2 ? this.address2 : '',
					lng: this.lng ? this.lng : longitude ? longitude : 0,
					lat: this.lat ? this.lat : latitude ? latitude : 0,
					index: 'index'
				}
			});
		},
		getHaopinList() {
			let that = this;
			let latitude = uni.getStorageSync('location').latitude;
			let longitude = uni.getStorageSync('location').longitude;
			return that.$request({
				url: 'product/lists',
				method: 'POST',
				data: {
					page: 1,
					sort: 'comment',
					order: 'desc',
					new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this.address2 ? this.address2 : '',
					lng: this.lng ? this.lng : longitude ? longitude : 0,
					lat: this.lat ? this.lat : latitude ? latitude : 0,
					index: 'index'
				}
			});
			this.miaoshaList;
		},
		getMiaoshaList() {
			return this.$request({
				url: 'product/seckills',
				method: 'POST',
				data: {
					starttime: -1
				}
			});
		},

		//选择城市
		getCitys(citys) {
			this.$store.commit('positionText', citys.name);
			this.$store.commit('lat', citys.lat);
			this.$store.commit('lng', citys.lng);
			let selectedAddress = citys.mergename ? citys.mergename[2] : citys.name;
			this.$store.commit('selectedAddress', selectedAddress);
			this.$rangeObj(selectedAddress);
		},
		// 点击地址
		onLocation() {
			uni.navigateTo({
				url: '/pages/filePages/onLocation/onLocation'
			});
		},
		// 点击更多
		goMore(shopType) {
			if (shopType == 4) {
				// 秒杀商品
				uni.navigateTo({
					url: '/pages/news/sanqi/shoppingFu2'
				});
			} else {
				//1 人气爆款  2 最新上架  3 最受好评
				uni.navigateTo({
					url: '/pages/news/sanqi/shoppingFu?shopType=' + shopType
				});
			}
		},
		// 搜索
		search() {},
		// 切换同城/全国
		changeRange(e) {
			this.rangeIndex = e;
			this.status = 1;
			this.page = 1;
			this.getGoodsData();
		},
		zhuli() {
			if (!uni.getStorageSync('userInfo')) {
				uni.navigateTo({
					url: '/pages/user/login'
				});
				return;
			}
			this.$request({
				url: 'partners/question_sure_add',
				method: 'POST',
				data: {
					user_id: this.shareUserid,
					user_ids: uni.getStorageSync('userInfo').id
				}
			}).then((res) => {
				if (res.data.code == 1) {
					this.$refs.popup.close();
					uni.showToast({
						title: '助力成功',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		close() {
			this.$refs.popup.close();
		},
		getInviteList() {
			this.$request({
				url: 'partners/question_sure_info',
				method: 'POST',
				data: {
					user_id: this.shareUserid
				}
			}).then((res) => {
				if (res.data.code == 1) {
					uni.hideLoading();
					if (res.data.data.status == 2) {
						this.user_list = res.data.data.question.user_list;
						if (this.shareUserid == uni.getStorageSync('userInfo').id) {
							this.dianliangType = 2;
						} else {
							this.dianliangType = 1;
						}
						this.$refs.popup.open('center');
					}
				}
			});
		},
		clearData(val) {
			this.goodsList = val;
		},
		// 获取商品列表
		getGoodsData(type) {
			let that = this;
			uni.showLoading({
				title: '加载中...'
			});
			// 爆款 价格 最新 好评 距离
			// 人气views、最新createtime、价格price 、评分comment
			// updatetime
			let latitude = uni.getStorageSync('location').latitude;
			let longitude = uni.getStorageSync('location').longitude;
			that
				.$request({
					url: 'product/lists',
					method: 'POST',
					data: {
						page: that.page,
						sort:
							this.listIndex == 0
								? 'views'
								: this.listIndex == 1
								? 'price'
								: this.listIndex == 2
								? 'updatetime'
								: this.listIndex == 3
								? 'comment'
								: this.listIndex == 4
								? 'distance'
								: '',
						order: this.flag ? 'desc' : 'asc',
						new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this.address2 ? this.address2 : '',
						lng: this.lng ? this.lng : longitude ? longitude : 0,
						lat: this.lat ? this.lat : latitude ? latitude : 0,
						cat_id: this.tid,
						index: 'index'
					}
				})
				.then((res) => {
					that.totalNum = res.data.data.last_page;
					that.goodsList = that.page == 1 ? (res.data.data.data ? res.data.data.data : []) : that.goodsList.concat(res.data.data.data);
					uni.hideLoading();
				});
		},
		// 获取轮播图以及菜单按钮

		getInit() {
			this.$request({
				// url: 'common/init'
				url: 'common/adverts'
			}).then((res) => {
				if (res.statusCode == 200) {
					this.rotationList = res.data.data.open;
				}
			});
		},
		// 获取分类
		getCategoryList() {
			this.$request({
				url: 'common/categoryList'
			}).then((res) => {
				if (res.statusCode == 200) {
					this.navList = [
						{
							name: '全部',
							id: 0
						}
					];
					this.navList.push(...res.data.data);
					this.tid = this.navList[0].id;
					this.getGoodsData();
				}
			});
		},
		// 菜单按钮跳转
		goPages(url) {
			uni.navigateTo({
				url: url
			});
		},
		onActive(index) {
			this.listIndex = index;
			if (this.listIndex == index) {
				this.flag = !this.flag;
			} else {
				// 爆款1 价格0 最新1 好评1 距离0
				if (this.listIndex == 0 || this.listIndex == 2 || this.listIndex == 3) {
					// 倒序
					this.flag = true;
				} else if (this.listIndex == 4 || this.listIndex == 1) {
					// 升序
					this.flag = false;
				}
			}
			this.status = 1;
			this.page = 1;
			this.clearData();
			this.getGoodsData();
		},
		// 点击分类
		clickNavList(id) {
			this.tid = id;
			this.navIndex = id;
			this.status = 1;
			this.page = 1;
			this.clearData();
			this.getGoodsData();
		},
		// 点击分类弹窗
		fuActive(id) {
			this.tid = id;
			this.status = 1;
			this.page = 1;
			this.clearData();
			this.getGoodsData();
		},
		// 控制分类开关
		onXianS() {
			this.show = !this.show;
		}
	}
};
</script>

<style scoped lang="scss">
.guo_btn {
	width: 622upx;
	height: 80upx;
	background: linear-gradient(154deg, #f08a38 0%, #f06b00 100%);
	border-radius: 40upx;
	margin: 0 auto;
	margin-top: 60upx;
	box-shadow: 0 10upx 8upx #d87416;
	color: #fff;
	font-size: 28upx;
	text-align: center;
	line-height: 80upx;
}
// 筛选弹窗
.fu_chuang {
	width: 750upx;
	height: 1624upx;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	z-index: 99999;

	.c_fu_chuang {
		width: 686upx;
		background: #ffffff;
		border-radius: 24upx 24upx 24upx 24upx;
		margin-top: 382upx;

		.c_fu_txt_box {
			flex-wrap: wrap;
			padding-top: 34upx;
			padding-bottom: 8upx;

			.list_txt {
				margin-left: 46upx;
				margin-bottom: 30upx;

				.fu_txt {
					color: #333;
				}
			}
		}
	}
}

.flex {
	display: flex;
}

.flex-clum {
	flex-direction: column;
}

.align-center {
	align-items: center;
}

.justify-around {
	justify-content: space-around;
}

.justify-between {
	justify-content: space-between;
}

.justify-center {
	justify-content: center;
}

.justify-end {
	justify-content: space-between;
}

//线条盒子
.bar {
	margin-bottom: 32rpx;
	background: #f4f4f4;
	height: 2rpx;
}

.shopping {
	width: 100%;
	.screen_list_box {
		padding-bottom: 10upx;
		background-color: #ffffff;
		box-sizing: border-box;
		.list_box {
			.active_txt {
				color: #333333;
			}

			.active_txt1 {
				color: #999999;
			}
		}

		.list_box:nth-child(1) {
			margin-left: 0;
		}
	}
}
</style>